
<template>
    <div style="width:100%;margin-top: 10px;">
        <div slot="header" class="forms">
            <el-form ref="form" :model="form" label-width="80px" class="box">
                <el-form-item label="姓名">
                    <el-input v-model="form.serch"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" style="height: 40px;margin-left: 10px;">搜索</el-button>
            </el-form>
            <el-button style="float: right; padding: 3px 0;color: #606266;border: 1px solid #606266;width: 80px;"
                type="text">删除选中</el-button>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
            style="width: 100%;border: 1px solid #ebeef5;margin-top: 20px;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="账号" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="role" label="权限" width="120">
            </el-table-column>
            <el-table-column prop="account" label="姓名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sex" label="性别" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="tel" label="手机号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="账号操作" show-overflow-tooltip width="200">
                <template slot-scope="scope">
                    <i class=" el-icon-document btn" @click="innerVisible = true"></i>
                    <i class="el-icon-delete btn" @click="dialogVisible = true"></i>
                    <i class="el-icon-edit-outline btn" @click="outerVisible = true"></i></template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400" style="margin-top:20px;">
        </el-pagination>
        <!-- 编辑卡 -->
        <el-dialog title="编辑账号" :visible.sync="outerVisible" class="edits">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="医务账号">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-select placeholder="选择权限" v-model="form.rooms">
                        <el-option label="医生" value="医生"></el-option>
                        <el-option label="护士" value="护士"></el-option>
                        <el-option label="药房" value="药房"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号密码">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-avatar shape="square" :size="120" :src="squareUrl"></el-avatar>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="outerVisible = false">确认编辑</el-button>
                <el-button type="info" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="outerVisible = false">取消</el-button>
            </div>
        </el-dialog>

        <!-- 账号详情 -->
        <el-dialog title="医务账号详情" :visible.sync="innerVisible" class="edits">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="医务账号">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="账号密码">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.bedNum"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-avatar shape="square" :size="120" :src="squareUrl"></el-avatar>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="innerVisible = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="系统提示" :visible.sync="dialogVisible" class="edits">
            <div style="text-align:center;">
                您正在删除医务账号，此操作不可逆，确认删除吗？
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="dialogVisible = false">确定</el-button>
                <el-button type="info" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="dialogVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                date: 'AE86',
                role: '医生',
                account: '李思群',
                sex: '男',
                tel: 136111111
            }, {
                date: 'AE86',
                role: '医生',
                account: '李思群',
                sex: '男',
                tel: 136111111
            }, {
                date: 'AE86',
                role: '护士',
                account: '李思群',
                sex: '男',
                tel: 136111111
            }, {
                date: 'AE86',
                role: '医生',
                account: '李思群',
                sex: '男',
                tel: 136111111
            },],
            multipleSelection: [],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            form: {
                serch: ''
            },
            isshow: false,
            outerVisible: false,
            innerVisible: false,
            dialogVisible: false,
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}

</script>

<style lang="less" scoped>
.forms {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;

    .box {
        display: flex;

        .el-button--primary {
            height: 0;
        }
    }
}

.btn {
    color: #66b1ff;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.dialog-footer {
    text-align: center;
}

</style>